import React from "react";

class App extends React.Component {
  state = {
    count: 1,
  };

  /**
   * 当前函数为什么当作事件处理函数时，内部的 this 指向会指向 undefined
   * 
   *    1. 该函数是赋值给一个prop。然后React内部在事件触发时拿到该prop加括号去调用的，类似如下
   *        onClick={this.handleClick1}
   *        onClick()
   *    2. 又由于 Class 的特性，默认会给函数都添加上严格模式，导致this是一个 undefined
   * 
   *    参考如下代码：
   *      const person = {
            name: '张三',
            showName() {
              console.log(this.name)
            }
          }

          person.showName()

          // 将 person.showName 赋值给一个新的变量
          const show = person.showName
          show()
   */
  handleClick1(event) {
    // console.log("event", event);
    // console.log("handleClick1", this);
    this.setState((state) => ({ count: state.count + 1 }));
  }

  render() {
    // this.handleClick1();

    return (
      <div>
        <h1>App</h1>

        <button onClick={this.handleClick1}>点我, {this.state.count}</button>
      </div>
    );
  }
}

export default App;
